<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="message" placeholder="edit me">
            <p>this is my form thrus {{message}}</p>
            <p style="white-space: pre-line;">this is my textatea {{message2}}</p>
            <textarea v-model="message2" placeholder="edit textarea me"></textarea>
            <div style="margin-top: 20px;">
                <input type="checkbox" id="jack" value="jack" v-model="checkbosNames">
                <label for="jack">jack</label>
                <input type="checkbox" id="Tome" value="Tome" v-model="checkbosNames">
                <label for="Tome">Tome</label>
                <input type="checkbox" id="lucy" value="lucy" v-model="checkbosNames">
                <label for="lucy">lucy</label></br>
                <span>this is my textarea {{checkbosNames}}</span>
            </div>
            <br style="margin-top: 20px;">
                <input type="radio" id="one" value="one" v-model="picked">
                <label for="one">one</label>
                <input type="radio" id="two" value="two" v-model="picked">
                <label for="two">two</label></br>
                <span>this is my picked {{picked}}</span>
            </div>
           
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    message:"hello ",
                    message2:"hello hello",
                    checkbosNames: ["Tome"],
                    picked: "one"
                },
                methods:function(){
                    var postObject= {
                        message: this.message,
                        message2: this.message2,
                        checkbosNames: this.checkbosNames,
                        picked: this.picked
                    };
                    console.log(postObject)
                }
            })
        </script>
    </body>
</html>